<template>
  <div class="container-information">
    <div class="information mb10">
      <div class="buneiss-blno">派车单号：{{ detailData.dispatchCode }}</div>
      <div class="statusBox">
        当前状态：
        <div class="circle"></div>
        <span class="statustext">{{ getStatusText(detailData.status) }}</span>
      </div>
    </div>
    <div v-if="type == 1" class="information flex-layout content-container mb8">
      <div class="flex-layout">
        <div class="information-label-left">发货单号：</div>
        <div class="bgcolor">{{ detailData.FhNo }}</div>
      </div>
      <div class="flex-layout">
        <div class="information-label-right">物流单号：</div>
        <div class="bgcolor">{{ detailData.WlNo }}</div>

      </div>

      <div class="flex-layout">
        <div class="information-label-left">提单号：</div>
        <div class="bgcolor">{{ detailData.Tdh }}</div>

      </div>
      <div class="flex-layout">
        <div class="information-label-right">箱型箱量：</div>
        <div class="bgcolor">{{ detailData.Xxxl }}</div>
      </div>
    </div>

    <div class="information flex-layout content-container mt8">
      <div class="flex-layout mr22">
        <div class="information-label-left">创建人员：</div>
        <div>{{ detailData.createBy ? detailData.createBy : '--' }}</div>
      </div>

      <div class="flex-layout">
        <div class="information-label-right">最后修改人员：</div>
        <div>{{ detailData.updateBy ? detailData.updateBy : '--' }}</div>
      </div>
    </div>
    <div class="information flex-layout content-container mt8">
      <div class="flex-layout mr22">
        <div class="information-label-left">创建时间：</div>
        <div>
          {{
            detailData.createTime
            ? $utils.formatDateTime(
              detailData.createTime,
              'YYYY-MM-DD HH:mm:ss'
            )
            : '--'
          }}
        </div>
      </div>

      <div class="flex-layout">
        <div class="information-label-right">最后修改时间：</div>
        <div>
          {{
            detailData.updateTime
            ? $utils.formatDateTime(
              detailData.updateTime,
              'YYYY-MM-DD HH:mm:ss'
            )
            : '--'
          }}
        </div>
      </div>
    </div>
  </div>
  <div class="step-container" v-if="type == 1">
    <div class="step-inner">
      <div class="step-item" :class="(detailData.status >= 0) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">派单生成</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 1) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 1) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">分配车队</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 2) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 2) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">派车</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 2) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 3) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">提柜</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 3) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 4) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">到厂</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 4) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 5) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">离厂</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 5) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 6) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">进港</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
    </div>
  </div>

  <div class="step-container" v-if="type == 2">
    <div class="step-inner">
      <div class="step-item" :class="(detailData.status >= 0) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">派单生成</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 1) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 1) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">派车</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 2) ? 'active' : 'un-active'"></div>

      <div class="step-item" :class="(detailData.status >= 2) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">到厂</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 2) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 3) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">离厂</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="(detailData.status >= 3) ? 'active' : 'un-active'"></div>
      <div class="step-item" :class="(detailData.status >= 4) ? 'active' : 'un-active'">
        <div class="step-circle"></div>
        <div class="step-text">进仓</div>
        <div class="step-time">
          {{
            detailData.createTime
            ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
            : '--'
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'

const Router = useRouter()
const Route = useRoute()
const store = useStore()

const props = defineProps({
  //详细数据
  detailData: {
    type: Object,
    default: () => { }
  },
  type: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['refresh'])

const getStatusText = (val) => {
  var str = "";
  if (props.type == 1) {

    switch (val) {
      case 0:
        console.log(112233);
        str = '派单生成'
        break;
      case 1:
        str = '分配车队'
        break;
      case 2:
        str = '派车'
        break;
      case 3:
        str = '提柜'
        break;
      case 4:
        str = '到厂'
        break;
      case 5:
        str = '离厂'
        break;
      case 6:
        str = '进港'
        break;

      default:
        break;
    }
  }
  if (props.type == 2) {

    switch (val) {
      case 0:
        str = '派单生成'
        break;
      case 1:
        str = '派车'
        break;
      case 2:
        str = '到厂'
        break;
      case 3:
        str = '离厂'
        break;
      case 4:
        str = '进仓'
        break;
      default:
        break;
    }
  }

  return str;
}


const state = reactive({
  timeShow: false,
  detailsVisibleFirst: false,
  // stepData
  stepData: {
    booking_space: {
      stateFlag: 'booking_space',
      stateTime: undefined
    }, //订舱
    release_space: {
      stateFlag: 'release_space',
      stateTime: undefined
    }, //放舱
    release_container: {
      stateFlag: 'release_container',
      stateTime: undefined
    }, //放箱
    pick_container: {
      stateFlag: 'pick_container',
      stateTime: undefined,
      containerSize: ''
    }, //提柜
    enter_port: {
      stateFlag: 'enter_port',
      stateTime: undefined,
      containerSize: ''
    }, //进港
    customs_release: {
      stateFlag: 'customs_release',
      stateTime: undefined,
      containerSize: ''
    }, //海放
    wharf_release: {
      stateFlag: 'wharf_release',
      stateTime: undefined
    }, //码放
    ship_open: {
      stateFlag: 'ship_open',
      stateTime: undefined
    }, //船开
    arrive_port: {
      stateFlag: 'arrive_port',
      stateTime: undefined
    }, //抵港
    unloading: {
      stateFlag: 'unloading',
      stateTime: undefined,
      containerSize: ''
    }, //卸货
    pick_cargo: {
      stateFlag: 'pick_cargo',
      stateTime: undefined
    } //提货
  }
})

onMounted(() => {

})

defineExpose({

})




</script>
<style lang="scss">
.time-contaienr {

  // position: fixed !important;
  .has-change {
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    background-color: #5a9cf8;
    margin-left: 4px;
  }

  .time-text {
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
  }

  .time-text span:hover {
    text-decoration: underline;
    color: #69a5f8;
    cursor: pointer;
  }
}
</style>

<style lang="scss" scoped>
.container-information {
  border-radius: 2px;
  background: #ffffff;
  margin-bottom: 5px;
  padding: 8px 12px;

  .information {
    display: flex;
    align-items: center;

    .statusBox {
      display: flex;
      height: 100%;
      align-items: center;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      margin-left: 16px;

      .circle {
        background: rgba(105, 198, 76, 1);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 2px;
      }

      .statustext {
        color: rgba(0, 0, 0, 1);
        font-weight: regular;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 0px;
      }
    }

    .buneiss-blno {
      color: rgba(51, 51, 51, 1);
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
    }
  }

  img {
    width: 16px;
    height: 16px;
    margin-left: 20px;
  }

  .btn-style {
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
    letter-spacing: 0px;
    cursor: pointer;
  }

  .information:last-child {
    margin-bottom: 0px;
  }

  .content-container {
    color: #00000099;
    font-family: PingFang SC;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0px;

    .information-label-left {
      width: 60px;
    }

    .bgcolor {
      background: rgba(230, 247, 255, 1);
      padding: 0 2px;
      color: rgba(0, 0, 0, 0.85);
    }

    .information-label-right {
      width: 84px;
      text-align: right;
    }
  }

  .content-container>div {
    min-width: 224px;
  }

  .content-container .flex-layout>div:nth-child(2) {
    // min-width: 108px;
  }
}

.step-container {
  border-radius: 2px;
  background: #ffffff;
  padding: 12px 18px;
  margin-bottom: 5px;

  .step-inner {
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 64px;

    .step-line {
      width: calc(100% - 30px);
      flex: 1;
    }

    .step-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-bottom: 8px;
    }

    .step-text {
      color: #000000d8;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
    }

    .step-time {
      color: #00000099;
      font-family: Helvetica;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: center;
    }

    img {
      width: 30px;
    }

    .bar {
      height: 1px;
      background-color: #bfdaf0;
    }

    .active-bar {
      height: 1px;
      background-color: #5a9cf8;
    }
  }

  .un-active {
    .step-circle {
      background: #DCDCDC;
    }

    .step-text {
      color: #969799;
    }

    .step-time {
      display: none;
    }

    &.step-gap {
      background: #DCDCDC;
    }
  }

  .active {
    .step-circle {
      background: #5a9cf8;
    }

    .step-text {
      color: #333333;
    }

    &.step-gap {
      background: #5a9cf8;
    }
  }

  .time-history {
    font-size: 12px;
    color: #36a9f8;
    display: flex;
    align-items: center;
  }

  .boex-number:hover {
    color: #36a9f8;
    cursor: pointer;
  }

  .step-gap {
    width: 24px;
    height: 2px;
    margin-left: 12px;
    margin-right: 12px;
    flex: 0 0 auto;
    margin-top: 5px;
  }

  .step-text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-top: 8px;

    .unreach {
      color: #00000073;
      font-family: Microsoft YaHei;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0px;
    }

    .reach {
      color: #000000d9;
      font-family: Microsoft YaHei;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0px;
    }
  }
}

.table-title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  line-height: 20px;
}

.flex-layout {
  display: flex;
  align-items: center;
}

.mr22 {
  margin-right: 22px;
}

.mb8 {
  padding-bottom: 8px;
}

.mt8 {
  padding-top: 8px;
}

.mb10 {
  margin-bottom: 10px;
}
</style>
